<template>
  <div class="track_the_playback">
    <div class="around">
      <!-- 设置时间 -->
      <i
        class="el-icon-kaishi buttonI"
        title="设置时间段"
        @click="setTime.show = true"
        >设置时间段</i
      >
      <!-- 数据列表 -->
      <i
        class="el-icon-kaishi buttonI"
        title="打开数据列表"
        @click="openDataList"
        >打开数据列表</i
      >
      <!-- 设置垃圾点位名称标签显示-->
      <input
        id="nameMarkerLabel"
        type="checkbox"
        @click="checkboxType"
        style="height: 20px; width: 20px"
      />
      <i style="margin-right: 5px"></i>
      <i class="el-icon-speed">垃圾点位名称标签</i>
      <!-- 设置收运状态标签显示 -->
      <input
        id="missingMarkerLabel"
        type="checkbox"
        @click="checkboxType"
        style="height: 20px; width: 20px"
      />
      <i style="margin-right: 5px"></i>
      <i class="el-icon-speed">收运状态标签</i>
      <br />
      <!-- 选择车辆 -->
      <i class="el-icon-kaishi">作业车辆</i>
      <el-select
        v-model="selectCarID"
        :options="optionsCar"
        placeholder="请选择"
        @change="getPointForCar"
      >
        <el-option
          v-for="item in optionsCar"
          :key="item"
          :label="item"
          :value="item"
        ></el-option>
      </el-select>
      <i></i>
      <!-- 播放轨迹 -->
      <i class="el-icon-kaishi buttonI" @click="getLineForCar">显示轨迹</i>
      <!-- 清除轨迹 -->
      <i class="el-icon-qingchu buttonI" @click="clear">清除轨迹</i>
      <!-- 设置显示某车收运点位 -->
      <input
        id="checkbox_theCar"
        type="checkbox"
        style="height: 20px; width: 20px"
        @click="checkboxTheCar"
      />
      <i style="margin-right: 5px"></i>
      <i class="el-icon-speed">只显示此车收运点位</i>
    </div>
    <!-- 地图 -->
    <div class="container" style="padding: 0px">
      <div id="map"></div>
    </div>
    <div class="person_top">
      <!-- <h3>按类型</h3>
      <p>
        <span>
          <input checked id="checkbox_large" type="checkbox" @click="checkboxType" />
        </span>
        <span style="font-size: 12px;">大中型餐饮单位</span>
      </p>
      <p>
        <span>
          <input checked id="checkbox_small" type="checkbox" @click="checkboxType" />
        </span>
        <span style="font-size: 12px;">沿街小型商铺</span>
      </p>
      <p>
        <span>
          <input checked id="checkbox_village" type="checkbox" @click="checkboxType" />
        </span>
        <span style="font-size: 12px;">小区</span>
      </p> -->
      <h3>按收运状态</h3>
      <p>
        <span>
          <input
            checked
            id="checkbox_Missing1"
            type="checkbox"
            @click="checkboxType"
          />
        </span>
        <span style="font-size: 12px">已收运</span>
      </p>
      <p>
        <span>
          <input
            checked
            id="checkbox_Missing2"
            type="checkbox"
            @click="checkboxType"
          />
        </span>
        <span style="font-size: 12px">长时间未收运</span>
      </p>
      <p>
        <span>
          <input
            checked
            id="checkbox_Missing3"
            type="checkbox"
            @click="checkboxType"
          />
        </span>
        <span style="font-size: 12px">从未收运</span>
      </p>
    </div>
    <div class="person_legend">
      <h3>垃圾点图例</h3>
      <p>
        <span>
          <img :src="imgMarker1" alt />
        </span>
        <span style="font-size: 12px">已收运</span>
      </p>
      <p>
        <span>
          <img :src="imgMarker2" alt />
        </span>
        <span style="font-size: 12px">长时间未收运</span>
      </p>
      <p>
        <span>
          <img :src="imgMarker3" alt />
        </span>
        <span style="font-size: 12px">从未收运</span>
      </p>
    </div>
    <!-- <div class="around">
      <el-slider
        v-model="setSlider.value"
        :step="setSlider.step"
        :max="setSlider.max"
        :format-tooltip="formatTooltipSlider"
        @input="inputSlider"
    ></el-slider>-->
    <!-- <el-slider v-model="valueSlider" range :marks="marksSlider" show-stops :max="24"></el-slider> -->
    <!-- </div> -->
    <!-- 数据列表 -->
    <el-dialog
      title="点位数据列表"
      :visible.sync="isShowDataRubbishPointDialog"
      width="80%"
    >
      <el-form>
        <!-- <div class="data_list" v-if="isShowDataRubbishPointDialog">
      <h2>
        <span>{{NAME}} - 轨迹回放</span>
        <i class="iconfont icon-guanbi" @click="isShowDataRubbishPointDialog = false"></i>
      </h2>
      <div class="settingWindow"> -->
        <el-table
          :data="dataRubbishPoint"
          style="width: 100%"
          fit
          max-height="450"
          highlight-current-row
        >
          <!-- {"Lng":"117.449241907762","Lat":"38.8629691205361","Speed":"50","Direction":"西","GpsTime":"2020/12/21 9:16:47"}, -->
          <el-table-column
            prop="垃圾点名称"
            label="垃圾点名称"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="所属地点"
            label="所属地点"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="状态"
            label="状态"
            align="center"
          ></el-table-column>
          <!-- <el-table-column prop="状态" label="状态" align="center"></el-table-column> -->
          <!-- <el-table-column fixed prop="LICENSE_PLATE" label="收运车辆" align="center"></el-table-column> -->
          <!-- <el-table-column fixed prop="ORIENTATION_TIME" label="收运时间" align="center"></el-table-column> -->
          <el-table-column
            prop="收运垃圾车辆"
            label="收运垃圾车辆"
          ></el-table-column>
          <el-table-column prop="收运时间" label="收运时间"></el-table-column>
          <el-table-column
            prop="最近收运垃圾车辆"
            label="最近收运垃圾车辆"
          ></el-table-column>
          <el-table-column
            prop="最近收运垃圾时间"
            label="最近收运垃圾时间"
          ></el-table-column>
          <el-table-column prop="遗漏时间" label="遗漏时间"></el-table-column>
          <!-- <el-table-column
            fixed
            prop="经度"
            label="经度"
            align="center"
          ></el-table-column> -->
          <!-- <el-table-column
            fixed
            prop="纬度"
            label="纬度"
            align="center"
          ></el-table-column> -->
          <!-- <el-table-column fixed prop="LATITUDE" label="纬度" align="center"></el-table-column> -->
        </el-table>
        <!-- </div>
    </div> -->
      </el-form>
    </el-dialog>
    <div class="set_time_box" v-if="setTime.show">
      <h2>
        <span>设置时间段</span>
        <i class="iconfont icon-guanbi" @click="setTime.show = false"></i>
      </h2>
      <div class="block"></div>
      <div class="settingWindow">
        <div>
          <span>选择日期</span>
          <el-date-picker
            v-model="setTime.selectDate"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </div>
        <div>
          <el-button type="primary" @click="getData">确 定</el-button>
        </div>
      </div>
    </div>
    <!-- 速度条 -->
    <div class="speed" v-if="speed.show">
      <h2>
        <span>设置播放速度</span>
        <i class="iconfont icon-guanbi" @click="speed.show = false"></i>
      </h2>
      <el-slider
        v-model="speed.value"
        :step="0.1"
        :max="2"
        :min="0.1"
        :format-tooltip="formatSpeed"
      ></el-slider>
      <el-button type="primary" @click="speed.show = false">确 定</el-button>
    </div>
    <!-- 设置播放间隔 -->
    <div class="speed" v-if="step.show">
      <h2>
        <span>设置播放间隔</span>
        <i class="iconfont icon-guanbi" @click="step.show = false"></i>
      </h2>
      <el-slider v-model="step.value" :step="1" :max="20" :min="1"></el-slider>
      <el-button type="primary" @click="step.show = false">确 定</el-button>
    </div>
  </div>
</template>

<script>
import { formatDate } from '@/common/js/date.js'
import imgMarker1 from '@/assets/img/marker/rubbishMarker1.png'
import imgMarker2 from '@/assets/img/marker/rubbishMarker2.png'
import imgMarker3 from '@/assets/img/marker/rubbishMarker3.png'
import imgMarkerCLC from '@/assets/img/marker/markerImageCLC.png'
import ImageStart from '@/assets/img/playback/begin3.png'
import ImageEnd from '@/assets/img/playback/end3.png'
// import imgMarkerLarge from '@/assets/img/marker/markerImageLarge.png'
// import imgMarkerSmall from '@/assets/img/marker/markerImageSmall.png'
// import imgMarkerVillage from '@/assets/img/marker/markerImageVillage.png'
// import imgMarkerZZZ from '@/assets/img/marker/markerImageZZZ.png'
// import MapStr from '@/main.js'

import { newMap } from '@/common/js/map.js'
export default {
  data () {
    return {
      Data: {
        arrayForType_Rubbish: [],
        arrayForCar: [],
      },
      MapV: {
        markerStart: null,
        markerEnd: null,
        VIcon_RubbishPoint: {},
        VText_RubbishPoint: {},
        VText_RubbishPoint2: {},
        DSCarLine: null,
        VCarLine: null,
        dataSetDicIcon: {},
        dataSetDicText2: {},
        dataSetCarIcon: null,
        VIcon_CarPoint: null,
        VText_CarPoint: null,
      },
      imgMarker1: imgMarker1,
      imgMarker2: imgMarker2,
      imgMarker3: imgMarker3,
      radioTimeMarkerLabel: '1',
      radioMissingMarkerLabel: '1',
      selectCarID: '',
      setTime: {
        show: true,
        selectDate: ''
      },
      dataRubbishPoint: [],
      dataList: [],
      isShowDataRubbishPointDialog: false,
      map: null,
      // mapZoom: 20,
      isZoomChange: '0',
      setSlider: {
        max: 100,
        value: 0,
        step: 1
      },
      markerWithSlider: null,
      dataCurrentIndex: 0,
      isShowTimeTap: true,
      ary: [],
      timeId: null,
      // 速度
      speed: {
        show: false,
        value: 0.2
      },
      // 步数
      step: {
        show: false,
        value: 1
      },
      markerARR_AllRubbishPoint: [],
      markerARR_Large: [],
      markerARR_Small: [],
      markerARR_Village: [],
      markerARR_Missing1: [],// 已收运
      markerARR_Missing2: [],// 待收运
      markerARR_Missing3: [],// 未收运
      markerARR_CLC: [],
      markerARR_ZZZ: [],
      optionsCar: []
    }
  },
  methods: {
    mapShow () {
      // 百度地图初始化
      this.map = newMap();
      this.map.centerAndZoom(new BMap.Point(localStorage.getItem('MapCenterInfo_lng'), localStorage.getItem('MapCenterInfo_lat')), 15);// 初始化地图,设置中心点坐标和地图级别

      //缩放屏幕
      const _this = this;
      this.map.addEventListener('zoomend', function (e) {
        // console.log("地图缩放至：" + this.getZoom() + "级");
        // var aa = e.target.getZoom();
        if (e.target.getZoom() > 13 && _this.isZoomChange === '0') {
          _this.isZoomChange = '1';
          document.getElementById('nameMarkerLabel').checked = true;
          document.getElementById('missingMarkerLabel').checked = true;
          if (!document.getElementById('checkbox_theCar').checked) {
            _this.drawMarkerRubbish()
          }
          // _this.checkboxType()
        }
        if (e.target.getZoom() < 14 && _this.isZoomChange === '1') {
          _this.isZoomChange = '0';
          document.getElementById('nameMarkerLabel').checked = false;
          document.getElementById('missingMarkerLabel').checked = false;
          if (!document.getElementById('checkbox_theCar').checked) {
            _this.drawMarkerRubbish()
          }
          // _this.checkboxType()
        }
      });

      // 地图轨迹回放拨块
      // this.map.addOverlay(this.markerWithSlider)
    },
    // 打开数据列表
    openDataList () {
      this.isShowDataRubbishPointDialog = true
    },
    getData () {
      this.getDataCar()
      this.getDataRubbish()
    },
    // 选定时间段,获取车辆列表
    // async getDataCar () {
    //   var url = '/RubbishVehicle/GetHistoryListWorkCPHNameWeb?time=' + this.setTime.selectDate + '&client_no=' + localStorage.getItem('CLIENT_NO')
    //   // if (localStorage.getItem('CLIENT_NO') === '0000009'){
    //   //   url = 'http://111.160.78.62:9929/CompanyapiBDEapi/RubbishVehicle/GetHistoryListWorkCPHNameWeb?time=' + this.setTime.selectDate + '&client_no=00000'
    //   // }
    //   const { data } = await this.$Http.get(url)
    //   this.optionsCar = data
    //   this.selectCarID = this.optionsCar[0].LICENSE_PLATE
    // },
    async getDataCar () {
      // GetCarWorkInfo(string ClientNo, string date, string carname)
      var url = '/RubbishVehicle/GetCarWorkInfo?carname=&date=' + this.setTime.selectDate + '&ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.optionsCar = []
      data.forEach(element => {
        if (!this.optionsCar.includes(element.车辆名称)) {
          this.optionsCar.push(element.车辆名称)
        }
      });
      this.selectCarID = this.optionsCar[0]
      this.getPointForCar()
    },
    // 选定时间段, 获取垃圾点位
    async getDataRubbish () { // 16232
      if (this.setTime.selectDate === '') {
        this.$message({
          message: '请选择日期',
          type: 'warning'
        })
        return false
      }
      const params = {
        CLIENT_NO: localStorage.getItem('CLIENT_NO'),
        WORKDATE: this.setTime.selectDate,
        TYPE: 0
      }
      console.log(params)

      // 设置加载效果
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
      var url = 'RubbishVehicle/GetExcelGarbage3?date=' + this.setTime.selectDate + '&ClientNo=' + localStorage.getItem('CLIENT_NO')
      // if (localStorage.getItem('CLIENT_NO') === '0000009'){
      //   url = 'http://111.160.78.62:9929/CompanyapiBDEapi/RubbishVehicle/GetExcelGarbage3?date=' + this.setTime.selectDate + '&ClientNo=00000'
      // }
      const { data } = await this.$Http.get(url)
      // const { data } = await this.$Http.get('/DataListCompany/GetRubbishHistoryCCApi', { params })
      loading.close()
      this.setTime.show = false
      if (data.length != 0) {
        var array1 = [], array2 = [], array3 = [];
        var boundPoints = [];
        for (var i = data.length - 1; i >= 0; i--) {
          var element = data[i]
          if (element.遗漏时间 === '从未收集') {
            element.状态 = '从未收运'
            element.遗漏时间 = ''
          }
          if (element.垃圾点名称 === '') {
            // data.splice(i, 1);
            continue;
          } else {
            element.LONGITUDE = element.经度
            element.LATITUDE = element.纬度
            element.NAME = element.垃圾点名称
            element.PointsType = element.状态
            element.Missing_Time = element.遗漏时间
            if (element.状态 === '未收运') {
              element.LICENSE_PLATE = element.最近收运垃圾车辆
              element.ORIENTATION_TIME = element.最近收运垃圾时间
              element.收运垃圾车辆 = ''
              element.收运时间 = ''
            } else {
              element.LICENSE_PLATE = element.收运垃圾车辆
              element.ORIENTATION_TIME = element.收运时间
            }
            boundPoints.push(new BMap.Point(element.LONGITUDE, element.LATITUDE))
          }
          if (element.PointsType === '已收运') {
            element.image = '已收运'
            array1.push(element);
          } else if (element.PointsType === '从未收运') {
            element.image = '从未收运'
            array3.push(element);
          } else {
            element.image = '未收运'
            array2.push(element);
          }
        }
        this.dataRubbishPoint = data
        // this.Data.arrayForType_Rubbish = { '已收运': array1, '未收运': array2, '从未收运': array3 };
        this.Data.arrayForType_Rubbish = [array1, array2, array3];
        this.map.setViewport(boundPoints);
        this.drawMarkerRubbish()
      } else {
        this.$message.error('未获取到符合条件的点位');
      }
    },
    async getPointForCar () {
      var url = '/RubbishVehicle/GetCarWorkInfo?carname=' + this.selectCarID + '&date=' + this.setTime.selectDate + '&ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.Data.arrayForCar = data;
      // this.optionsCar = []
      // data.forEach(element => {
      //   if (!this.optionsCar.includes(element.车辆名称)) {
      //     this.optionsCar.push(element.车辆名称)
      //   }
      // });
      // this.selectCarID = this.optionsCar[0].LICENSE_PLATE
    },
    // 选定时间段,获取车辆轨迹列表
    async getLineForCar () { // 16232
      let VID = this.Data.arrayForCar[0].车辆编号
      const params = {
        VID: VID,
        startTime: this.setTime.selectDate + ' 00:00:00',
        endTime: this.setTime.selectDate + ' 23:59:59'
      }
      // console.log(params)
      // 设置加载效果
      const loading = this.$loading({
        lock: true,
        text: '数据加载中...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      })
      var url = '/DataListCompany/GetVehicleHistoryInfoListApi'
      // if (localStorage.getItem('CLIENT_NO') === '0000009'){
      //   url = 'http://111.160.78.62:9929/CompanyapiBDEapi/DataListCompany/GetVehicleHistoryInfoListApi'
      // }
      const { data } = await this.$Http.get(url, { params })
      loading.close()
      if (data.length != 0) {
        this.dataList = data
        this.setTime.show = false
        this.setSlider.max = this.dataList.length
        this.drawPicture()
      } else {
        this.$message.error('未获取到轨迹');
      }
    },
    checkboxText () {
      if (document.getElementById('nameMarkerLabel').checked) {
        for (var key in this.MapV.VText_RubbishPoint) {
          this.MapV.VText_RubbishPoint[key].show()
        }
      } else {
        for (var key in this.MapV.VText_RubbishPoint) {
          this.MapV.VText_RubbishPoint[key].hide()
        }
      }
      if (document.getElementById('missingMarkerLabel').checked) {
        for (var key in this.MapV.VText_RubbishPoint2) {
          this.MapV.VText_RubbishPoint2[key].show()
        }
      } else {
        for (var key in this.MapV.VText_RubbishPoint2) {
          this.MapV.VText_RubbishPoint2[key].hide()
        }
      }
    },
    checkboxType () {
      for (var key in this.MapV.VIcon_RubbishPoint) {
        this.MapV.VIcon_RubbishPoint[key].hide()
        this.MapV.VText_RubbishPoint[key].hide()
        this.MapV.VText_RubbishPoint2[key].hide()
      }

      if (document.getElementById('checkbox_Missing1').checked) {
        this.MapV.VIcon_RubbishPoint['已收运'].show()
        if (document.getElementById('nameMarkerLabel').checked) {
          this.MapV.VText_RubbishPoint['已收运'].show()

        }
        if (document.getElementById('missingMarkerLabel').checked) {
          this.MapV.VText_RubbishPoint2['已收运'].show()

        }
      }
      if (document.getElementById('checkbox_Missing2').checked) {
        this.MapV.VIcon_RubbishPoint['未收运'].show()
        if (document.getElementById('nameMarkerLabel').checked) {
          this.MapV.VText_RubbishPoint['未收运'].show()
        }
        if (document.getElementById('missingMarkerLabel').checked) {
          this.MapV.VText_RubbishPoint2['未收运'].show()
          if (!document.getElementById('nameMarkerLabel').checked) {
            this.MapV.VText_RubbishPoint2['未收运'].update({
              options: {
                offset: { // 文本偏移值
                  x: 0,
                  y: 27
                }
              } // 修改配置
            });
          } else {
            this.MapV.VText_RubbishPoint2['未收运'].update({
              options: {
                offset: { // 文本偏移值
                  x: 0,
                  y: 42
                }
              } // 修改配置
            });
          }
        }
      }
      if (document.getElementById('checkbox_Missing3').checked) {
        this.MapV.VIcon_RubbishPoint['从未收运'].show()
        if (document.getElementById('nameMarkerLabel').checked) {
          this.MapV.VText_RubbishPoint['从未收运'].show()
        }
        if (document.getElementById('missingMarkerLabel').checked) {
          this.MapV.VText_RubbishPoint2['从未收运'].show()
        }
      }
      // if (document.getElementById('checkbox_theCar').checked) {
      //   this.drawMarkerRubbish()
      // }
      // this.markerARR_AllRubbishPoint.forEach(element => {
      //   console.log(element.getTitle())
      //   var isShowType = true
      //   // if (document.getElementById('checkbox_large').checked && element.getTitle().indexOf('3,') != -1) {
      //   //   isShowType = true
      //   // }
      //   // if (document.getElementById('checkbox_small').checked && element.getTitle().indexOf('2,') != -1) {
      //   //   isShowType = true
      //   // }
      //   // if (document.getElementById('checkbox_village').checked && element.getTitle().indexOf('1,') != -1) {
      //   //   isShowType = true
      //   // }
      //   var isShowMissing = false
      //   if (document.getElementById('checkbox_Missing1').checked && element.getTitle().indexOf('已收运') != -1) {
      //     isShowMissing = true
      //   }
      //   if (document.getElementById('checkbox_Missing3').checked && element.getTitle().indexOf('从未收运') != -1) {
      //     isShowMissing = true
      //   }
      //   if (document.getElementById('checkbox_Missing2').checked && element.getTitle().indexOf('天') != -1) {
      //     isShowMissing = true
      //   }
      //   var isShowTheCar = true
      //   if (document.getElementById('checkbox_theCar').checked) {
      //     if (element.getTitle().indexOf(this.selectCarID) != -1) {
      //       isShowTheCar = true
      //     } else {
      //       isShowTheCar = false
      //     }
      //   }
      //   if (isShowType == true && isShowMissing == true && isShowTheCar == true) {
      //     element.show()
      //   } else {
      //     element.hide()
      //   }
      // })
    },
    // 画车辆轨迹
    drawPicture () {
      var pointArr = []
      var boundPoints = [];
      for (var i = 0; i < this.dataList.length; i++) {
        var item = this.dataList[i];
        pointArr.push([item.Lng, item.Lat])
        boundPoints.push(new BMap.Point(item.Lng, item.Lat))
      }
      if (this.MapV.DSCarLine) {
        this.MapV.DSCarLine.set({
          geometry: {
            type: 'LineString',
            coordinates: pointArr
          },
        });
      } else {
        this.MapV.DSCarLine = new mapv.DataSet({
          geometry: {
            type: 'LineString',
            coordinates: pointArr
          },
        });
        var options = {
          zIndex: -1,
          strokeStyle: 'rgba(0,0,255,0.6)',//47,79,79
          lineWidth: 4,
          lineJoin: 'round',
          draw: 'simple'
        }
        new mapv.baiduMapLayer(this.map, this.MapV.DSCarLine, options);
      }
      this.map.setViewport(boundPoints);
      if (!this.MapV.markerStart) {
        this.MapV.markerStart = new BMap.Marker(boundPoints[0], { icon: new BMap.Icon(ImageStart, new BMap.Size(40, 34), { anchor: new BMap.Size(20, 34) }) })
        this.map.addOverlay(this.MapV.markerStart)
        this.MapV.markerEnd = new BMap.Marker(boundPoints[boundPoints.length - 1], { icon: new BMap.Icon(ImageEnd, new BMap.Size(40, 34), { anchor: new BMap.Size(20, 34) }) })
        this.map.addOverlay(this.MapV.markerEnd)
      } else {
        this.MapV.markerStart.setPosition(boundPoints[0]);
        this.MapV.markerEnd.setPosition(boundPoints[boundPoints.length - 1]);
        this.MapV.markerStart.show();
        this.MapV.markerEnd.show();
      }
    },
    // 清除轨迹
    clear () {
      if (this.MapV.DSCarLine) {
        this.MapV.DSCarLine.set([]);
      }
      this.MapV.markerStart.hide();
      this.MapV.markerEnd.hide();
      // this.ary.forEach(element => {
      //   element.enableMassClear()
      //   this.map.removeOverlay(element)
      // })
    },
    async drawMarkerRubbish () {
      for (var key in this.MapV.dataSetDicIcon) {
        this.MapV.dataSetDicIcon[key].set([]);
        this.MapV.dataSetDicText2[key].set([]);
        if (document.getElementById('nameMarkerLabel').checked) {
          this.MapV.VText_RubbishPoint[key].show()
        } else {
          this.MapV.VText_RubbishPoint[key].hide()
        }
        if (document.getElementById('missingMarkerLabel').checked) {
          this.MapV.VText_RubbishPoint2[key].show()
        } else {
          this.MapV.VText_RubbishPoint2[key].hide()
        }
      }
      //如果关闭车辆显示，结束执行
      // if (!this.mapOperationsList[0].active) {
      //   // if (_self.MapV.iconLayerDic.hasOwnProperty(key)) {
      //   //   _self.MapV.iconLayerDic[key].hide()
      //   //   _self.MapV.textLayerDic[key].hide()
      //   return
      //   // }
      // }
      //因为需要加载不同的图片，所以将车辆数据按车辆类型、是否在线分成不同数组this.Data.arrayForType_Veicle
      this.Data.arrayForType_Rubbish.forEach(arrayDataForSameIcon => {
        //如果数据中无数据，退出循环,不然下方arrayDataForSameIcon[0].CARTYPE报错
        if (arrayDataForSameIcon.length == 0) {
          return;
        }
        let key = arrayDataForSameIcon[0].image

        const _self = this;

        let img = new Image();
        img.src = require('@/assets/img/marker/' + key + this.isZoomChange + '.png')
        img.onload = function () {
          //循环加载同一张图片的车辆数据
          var arrayText = [];
          let arrayImage = arrayDataForSameIcon.map(v => {
            // if (document.getElementById('checkbox_theCar').checked) {
            //   if (v.LICENSE_PLATE != _self.selectCarID) {
            //     return
            //   }
            // }

            arrayText.push({
              geometry: {
                type: 'Point',
                coordinates: [v.LONGITUDE, v.LATITUDE]
              },
              text: v.Missing_Time
            });
            v.geometry = {
              type: 'Point',
              coordinates: [v.LONGITUDE, v.LATITUDE]
            }
            v.icon = img;
            v.text = v.NAME //+ '\n' + v.Missing_Time;
            return v;
          })

          // let key = arrayDataForSameIcon[0].image

          if (_self.MapV.dataSetDicIcon.hasOwnProperty(key)) {

            _self.MapV.dataSetDicIcon[key].set(arrayImage);
            _self.MapV.dataSetDicText2[key].set(arrayText);
            // _self.MapV.iconLayerDic[key].show()
            // _self.MapV.textLayerDic[key].show()

          } else {

            let optionsICON = {
              draw: 'icon',
              width: 30, // 规定图像的宽度
              height: 38, // 规定图像的高度
              // offset: { // 偏移值
              //   x: 0,
              //   y: 20
              // }
            }

            let optionsTEXT = {
              draw: 'text',
              size: 14,
              // avoid: true, // 开启文本标注避让
              textBaseline: 'middle',
              offset: { // 文本偏移值
                x: 0,
                y: 27
              }
            }

            _self.MapV.dataSetDicIcon[key] = new mapv.DataSet(arrayImage);
            _self.MapV.dataSetDicText2[key] = new mapv.DataSet(arrayText);
            _self.MapV.VIcon_RubbishPoint[key] = new mapv.baiduMapLayer(_self.map, _self.MapV.dataSetDicIcon[key], optionsICON)
            _self.MapV.VText_RubbishPoint[key] = new mapv.baiduMapLayer(_self.map, _self.MapV.dataSetDicIcon[key], optionsTEXT)
            _self.MapV.VText_RubbishPoint2[key] = new mapv.baiduMapLayer(_self.map, _self.MapV.dataSetDicText2[key], {
              draw: 'text',
              size: 14,
              // avoid: true, // 开启文本标注避让
              textBaseline: 'middle',
              offset: { // 文本偏移值
                x: 0,
                y: 42
              }
            })
            if (document.getElementById('nameMarkerLabel').checked) {
              _self.MapV.VText_RubbishPoint[key].show()
            } else {
              _self.MapV.VText_RubbishPoint[key].hide()
            }
            if (document.getElementById('missingMarkerLabel').checked) {
              _self.MapV.VText_RubbishPoint2[key].show()
            } else {
              _self.MapV.VText_RubbishPoint2[key].hide()
            }
          }
        }
      });

    },
    // 画垃圾点位
    async drawMarkerRubbishForCar () {

      //因为需要加载不同的图片，所以将车辆数据按车辆类型、是否在线分成不同数组this.Data.arrayForType_Veicle
      // this.Data.arrayForType_Rubbish.forEach(arrayDataForSameIcon => {
      //如果数据中无数据，退出循环,不然下方arrayDataForSameIcon[0].CARTYPE报错
      if (this.Data.arrayForCar.length == 0) {
        return;
      }
      const _self = this;
      let img = new Image();
      img.src = require('@/assets/img/marker/已收运1.png')
      img.onload = function () {
        //循环加载同一张图片的车辆数据
        // var arrayText = [];
        let arrayImage = _self.Data.arrayForCar.map(v => {
          // if (document.getElementById('checkbox_theCar').checked) {
          //   if (v.LICENSE_PLATE != _self.selectCarID) {
          //     return
          //   }
          // }
          // arrayText.push({
          //   geometry: {
          //     type: 'Point',
          //     coordinates: [v.经度, v.纬度]
          //   },
          //   text: v.Missing_Time
          // });
          v.geometry = {
            type: 'Point',
            coordinates: [v.经度, v.纬度]
          }
          v.icon = img;
          v.text = v.垃圾点名称 //+ '\n' + v.Missing_Time;
          return v;
        })

        if (_self.MapV.dataSetCarIcon) {

          _self.MapV.dataSetCarIcon.set(arrayImage);

        } else {

          let optionsICON = {
            draw: 'icon',
            width: 30, // 规定图像的宽度
            height: 38, // 规定图像的高度
            // offset: { // 偏移值
            //   x: 0,
            //   y: 20
            // }
          }

          let optionsTEXT = {
            draw: 'text',
            size: 14,
            // avoid: true, // 开启文本标注避让
            textBaseline: 'middle',
            offset: { // 文本偏移值
              x: 0,
              y: 27
            }
          }

          _self.MapV.dataSetCarIcon = new mapv.DataSet(arrayImage)
          _self.MapV.VIcon_CarPoint = new mapv.baiduMapLayer(_self.map, _self.MapV.dataSetCarIcon, optionsICON)
          _self.MapV.VText_CarPoint = new mapv.baiduMapLayer(_self.map, _self.MapV.dataSetCarIcon, optionsTEXT)
          // _self.MapV.VText_RubbishPoint2[key] = new mapv.baiduMapLayer(_self.map, _self.MapV.dataSetDicText2[key], {
          //   draw: 'text',
          //   size: 14,
          //   // avoid: true, // 开启文本标注避让
          //   textBaseline: 'middle',
          //   offset: { // 文本偏移值
          //     x: 0,
          //     y: 42
          //   }
          // })
        }
      }
      // });
    },
    checkboxTheCar () {
      if (document.getElementById('checkbox_theCar').checked) {
        for (var key in this.MapV.VIcon_RubbishPoint) {
          this.MapV.VIcon_RubbishPoint[key].hide()
          this.MapV.VText_RubbishPoint[key].hide()
          this.MapV.VText_RubbishPoint2[key].hide()
        }
        this.drawMarkerRubbishForCar()
        this.MapV.VIcon_CarPoint.show()
        this.MapV.VText_CarPoint.show()
      } else {
        for (var key in this.MapV.VIcon_RubbishPoint) {
          this.MapV.VIcon_RubbishPoint[key].show()
          this.MapV.VText_RubbishPoint[key].show()
          this.MapV.VText_RubbishPoint2[key].show()
        }
        this.drawMarkerRubbish()
        this.MapV.VIcon_CarPoint.hide()
        this.MapV.VText_CarPoint.hide()
      }
    },

    // isShowMarkerLabel () {
    //   // 设置加载效果
    //   const loading = this.$loading({
    //     lock: true,
    //     text: '数据加载中...',
    //     spinner: 'el-icon-loading',
    //     background: 'rgba(0, 0, 0, 0.5)'
    //   })
    //   this.drawMarkerRubbish()
    // },
    // 获取处理厂列表
    async getClcList () {
      // const { data } = await this.$axios.get('http://111.160.78.62:9930/Cityscapeapi/DataListCompany/GetFactoryInfoApi?Type=1')
      var url = '/DataListCompany/GetFactoryInfoApi?Type=1'
      // if (localStorage.getItem('CLIENT_NO') === '0000009'){
      //   url = 'http://111.160.78.62:9929/CompanyapiBDEapi/DataListCompany/GetFactoryInfoApi?Type=1'
      // }
      const { data } = await this.$Http.get(url)
      this.clcList = data.filter(item => {
        return item
      })
      this.handleCheckCLC()
    },
    handleCheckCLC () {
      // if (document.getElementById('checkbox_clc').checked) {
      var pointPolygon = []
      for (var j = 0; j < this.clcList.length; j++) {
        var point = new BMap.Point(this.clcList[j].LONGITUDE, this.clcList[j].LATITUDE)
        pointPolygon.push(point)
      }
      // var polygon = new BMap.Polygon([new BMap.Point(117.425438, 38.872788), new BMap.Point(117.426718, 38.873610), new BMap.Point(117.427381, 38.872967), new BMap.Point(117.426111, 38.872155), new BMap.Point(117.425438, 38.872788)], { strokeColor: 'blue', strokeWeight: 2, strokeOpacity: 0.5 })
      var polygon = new BMap.Polygon(pointPolygon)
      polygon.disableMassClear()
      this.map.addOverlay(polygon)
      this.markerARR_CLC.push(polygon)
      var polygonCenter = polygon.getBounds().getCenter()
      var markerImage = new BMap.Icon(imgMarkerCLC, new BMap.Size(50, 50))
      var marker = new BMap.Marker(polygonCenter, { icon: markerImage })
      marker.disableMassClear()
      var label = new BMap.Label('滨海新区碧海环保垃圾处理厂', { offset: new BMap.Size(-10, 50) })
      marker.setLabel(label)
      this.map.addOverlay(marker)
      this.markerARR_CLC.push(marker)
      // this.map.centerAndZoom(polygonCenter, 16)
      // } else {
      //   for (var i = 0; i < this.markerARR_CLC.length; i++) {
      //     this.markerARR_CLC[i].enableMassClear()
      //     this.map.removeOverlay(this.markerARR_CLC[i])
      //   }
      //   this.markerARR_CLC = []
      // }
    },
    // handleCheckZZZ () {
    //   if (document.getElementById('checkbox_zzz').checked) {
    //     var bounds = this.map.getBounds()
    //     var sw = bounds.getSouthWest()
    //     var ne = bounds.getNorthEast()
    //     var lngSpan = Math.abs(sw.lng - ne.lng)
    //     var latSpan = Math.abs(ne.lat - sw.lat)
    //     for (var j = 0; j < 6; j++) {
    //       var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7))
    //       var markerImage = new BMap.Icon(imgMarkerZZZ, new BMap.Size(50, 50))
    //       var marker = new BMap.Marker(point, { icon: markerImage })
    //       marker.disableMassClear()
    //       this.map.addOverlay(marker)
    //       this.markerARR_ZZZ.push(marker)
    //     }
    //   } else {
    //     for (var i = 0; i < this.markerARR_ZZZ.length; i++) {
    //       this.markerARR_ZZZ[i].enableMassClear()
    //       this.map.removeOverlay(this.markerARR_ZZZ[i])
    //     }
    //     this.markerARR_ZZZ = []
    //   }
    // },
    // handleCheckLarge () {
    //   if (document.getElementById('checkbox_large').checked) {
    //     var bounds = this.map.getBounds()
    //     var sw = bounds.getSouthWest()
    //     var ne = bounds.getNorthEast()
    //     var lngSpan = Math.abs(sw.lng - ne.lng)
    //     var latSpan = Math.abs(ne.lat - sw.lat)
    //     for (var j = 0; j < 6; j++) {
    //       var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7))
    //       var markerImage = new BMap.Icon(imgMarkerLarge, new BMap.Size(50, 50))
    //       var marker = new BMap.Marker(point, { icon: markerImage })
    //       marker.disableMassClear()
    //       this.map.addOverlay(marker)
    //       this.markerARR_Large.push(marker)
    //     }
    //   } else {
    //     for (var i = 0; i < this.markerARR_Large.length; i++) {
    //       this.markerARR_Large[i].enableMassClear()
    //       this.map.removeOverlay(this.markerARR_Large[i])
    //     }
    //     this.markerARR_Large = []
    //   }
    // },
    // handleCheckSmall () {
    //   if (document.getElementById('checkbox_small').checked) {
    //     var bounds = this.map.getBounds()
    //     var sw = bounds.getSouthWest()
    //     var ne = bounds.getNorthEast()
    //     var lngSpan = Math.abs(sw.lng - ne.lng)
    //     var latSpan = Math.abs(ne.lat - sw.lat)
    //     for (var j = 0; j < 6; j++) {
    //       var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7))
    //       var markerImage = new BMap.Icon(imgMarkerSmall, new BMap.Size(50, 50))
    //       var marker = new BMap.Marker(point, { icon: markerImage })
    //       marker.disableMassClear()
    //       this.map.addOverlay(marker)
    //       this.markerARR_Small.push(marker)
    //     }
    //   } else {
    //     for (var i = 0; i < this.markerARR_Small.length; i++) {
    //       this.markerARR_Small[i].enableMassClear()
    //       this.map.removeOverlay(this.markerARR_Small[i])
    //     }
    //     this.markerARR_Small = []
    //   }
    // },
    // handleCheckVillage () {
    //   if (document.getElementById('checkbox_village').checked) {
    //     var bounds = this.map.getBounds()
    //     var sw = bounds.getSouthWest()
    //     var ne = bounds.getNorthEast()
    //     var lngSpan = Math.abs(sw.lng - ne.lng)
    //     var latSpan = Math.abs(ne.lat - sw.lat)
    //     for (var j = 0; j < 6; j++) {
    //       var point = new BMap.Point(sw.lng + lngSpan * (Math.random() * 0.7), ne.lat - latSpan * (Math.random() * 0.7))
    //       var markerImage = new BMap.Icon(imgMarkerVillage, new BMap.Size(50, 50))
    //       var marker = new BMap.Marker(point, { icon: markerImage })
    //       marker.disableMassClear()
    //       this.map.addOverlay(marker)
    //       this.markerARR_Village.push(marker)
    //     }
    //   } else {
    //     for (var i = 0; i < this.markerARR_Village.length; i++) {
    //       this.markerARR_Village[i].enableMassClear()
    //       this.map.removeOverlay(this.markerARR_Village[i])
    //     }
    //     this.markerARR_Village = []
    //   }
    // }
  },
  mounted () {
    this.setTime.selectDate = formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd')
    // 显示地图
    this.mapShow()
    this.getClcList()
  }
}
</script>

<style scoped lang="less">
/deep/.BMap_cpyCtrl {
  display: none !important;
}
.el-select {
  bottom: 5px;
}
/deep/.anchorBL {
  display: none !important;
}
.buttonI {
  border: 1px solid #fff;
  padding: 0px 8px;
  border-radius: 6px;
}
.track_the_playback {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  .around {
    padding: 10px 100px;
    height: 72px;
    background-color: #007acc;
    &:first-child {
      padding-left: 10px;
      i {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
        //width: 30px;
        height: 30px;
        line-height: 28px;
        text-align: center;
        vertical-align: middle;
        cursor: pointer;
        margin-right: 15px;
        margin-bottom: 12px;
      }
      // .el-icon-s-operation {
      //   font-size: 22px;
      // }
    }
  }
  .container {
    flex: 1;
    #map {
      height: 100%;
    }
  }
}
h2 {
  font-size: 16px;
  height: 30px;
  line-height: 30px;
  padding-left: 15px;
  border-bottom: 2px solid #ccc;
  background-color: #f1f1f1;
  i {
    float: right;
    margin-right: 10px;
  }
}
.settingWindow {
  height: calc(~'100% - 32px');
  padding-left: 15px;
}
.data_list {
  height: 485px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  box-shadow: 0 0 5px 3px #ccc;
  border-radius: 8px;
  overflow: hidden;
}
.set_time_box {
  width: 300px;
  height: 130px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  box-shadow: 0 0 5px 3px #ccc;
  background-color: #fff;
  h2 {
    border-bottom: 1px solid #ccc;
  }
  .settingWindow {
    padding-top: 5px;
    & > div {
      height: 26px;
      line-height: 26px;
      margin-bottom: 5px;
      padding-top: 10px;
      & > span {
        padding-right: 15px;
      }
      & > .el-button {
        float: right;
        padding: 0 5px;
        height: 26px;
        right: 20px;
        position: absolute;
      }
    }
    /deep/.el-date-editor.el-input {
      width: 190px;
    }
    /deep/.el-input--prefix .el-input__inner {
      height: 26px;
      border-radius: 2px;
      padding: 0;
      padding-left: 5px;
      overflow: hidden;
      border-color: #007acc;
      padding: 0;
      padding-left: 20px;
    }
    /deep/.el-input__icon {
      line-height: 26px;
    }
    /deep/.el-input__prefix {
      left: -1px;
    }
  }
}
.person_top {
  width: 150px;
  height: 140px;
  position: absolute;
  left: 20px;
  top: 200px;
  background-color: #b2dfee;
  border: 1px solid #ccc;
  h3 {
    padding-top: 14px;
    // height: 30px;
    text-align: center;
    // line-height: 30px;
    color: #333;
  }
  p {
    height: 30px;
    // text-align: center;
    padding-left: 5px;
    padding-left: 10px;
    color: #333;
    span:first-child {
      text-align: center;
      padding-top: 12px;
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 5px;
      vertical-align: middle;
      img {
        background-size: 30px 30px;
      }
    }
  }
}
.person_legend {
  width: 140px;
  height: 140px;
  position: absolute;
  right: 40px;
  top: 200px;
  background-color: #f3f3f3;
  border: 1px solid #ccc;
  h3 {
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #333;
  }
  p {
    height: 35px;
    // text-align: center;
    padding-left: 10px;
    color: #333;
    span:first-child {
      display: inline-block;
      width: 30px;
      height: 30px;
      margin-right: 5px;
      vertical-align: middle;
      img {
        // background-size: 30px 30px;
        height: 30px;
      }
    }
  }
}
.speed {
  width: 300px;
  height: 120px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 5px 3px #ccc;
  background-color: #fff;
  .el-slider {
    margin: 10px 15px 0px;
    padding: 0 10px;
  }
  .el-button {
    float: right;
    margin-right: 15px;
    padding: 0 5px;
    height: 26px;
  }
  .el-switch {
    border: 2px solid #fff;
  }
}
</style>
